{% load static %}
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>LCO.global ConfigDB3 | {% block title %}Overview{% endblock %}</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>
        <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/datatables.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/main.css' %}">

        <script src="{% static 'js/vendor/modernizr-2.8.3-respond-1.4.2.min.js' %}"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
              <li><a href="/">ConfigDB</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="{% url 'html-site-list' %}">Sites</a></li>
              <li><a href="{% url 'html-telescope-list' %}">Telescopes</a></li>
              <li><a href="{% url 'html-instrument-list' %}">Instruments</a></li>
              <li><a href="{% url 'html-camera-list' %}">Cameras</a></li>
              <li><a href="{% url 'html-opticalelementgroup-list' %}">Optical Element Groups</a></li>
              <li><a href="{% url 'html-genericmodegroup-list' %}">Generic Mode Groups</a></li>
            </ul>
          </div>
        </div>
      </nav>

      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-15 col-md-12 main">
            {% block content %}
            <h1 class="page-header">Overview</h1>
            <div class="row placeholders">
              <div class="col-sm-2 placeholder">
                <h2><a href="{% url 'html-site-list' %}">{{ site_count }}</a></h2>
                <span class="text-muted"><h4>Sites</h4></span>
              </div>
              <div class="col-sm-2 placeholder">
                <h2><a href="{% url 'html-telescope-list' %}">{{ telescope_count }}</a></h2>
                <span class="text-muted"><h4>Telescopes</h4></span>
              </div>
              <div class="col-sm-2 placeholder">
                <h2><a href="{% url 'html-instrument-list' %}">{{ instrument_count }}</a></h2>
                <span class="text-muted"><h4>Instruments</h4></span>
              </div>
              <div class="col-sm-2 placeholder">
                <h2><a href="{% url 'html-camera-list' %}">{{ camera_count }}</a></h2>
                <span class="text-muted"><h4>Cameras</h4></span>
              </div>
              <div class="col-sm-2 placeholder">
                <h2><a href="{% url 'html-opticalelementgroup-list' %}">{{ opticalelementgroup_count }}</a></h2>
                <span class="text-muted"><h4>Optical Element Groups</h4></span>
              </div>
              <div class="col-sm-2 placeholder">
                <h2><a href="{% url 'html-genericmodegroup-list' %}">{{ genericmodegroup_count }}</a></h2>
                <span class="text-muted"><h4>Generic Mode Groups</h4></span>
              </div>
            </div>
            <div class="row">

            <h2>API</h2>
            <p>
              ConfigDB provides a RESTful api to query data. The data will be returned in JSON format unless accessed via browser, in which
              case a user friendly interface is provided.
            </p>
            <p>
           The top level resource are:
            </p>
            <ul>
              <li>
                Sites: <a href="{% url 'site-list' %}">{% url 'site-list' %}</a>
              </li>
              <li>
                Enclosures: <a href="{% url 'enclosure-list' %}">{% url 'enclosure-list' %}</a>
              </li>
              <li>
                Telescopes: <a href="{% url 'telescope-list' %}">{% url 'telescope-list' %}</a>
              </li>
              <li>
                Instruments: <a href="{% url 'instrument-list' %}">{% url 'instrument-list' %}</a>
              </li>
              <li>
                Cameras: <a href="{% url 'camera-list' %}">{% url 'camera-list' %}</a>
              </li>
              <li>
                Optical Element Groups: <a href="{% url 'opticalelementgroup-list' %}">{% url 'opticalelementgroup-list' %}</a>
              </li>
              <li>
                Optical Elements: <a href="{% url 'opticalelement-list' %}">{% url 'opticalelement-list' %}</a>
              </li>
              <li>
                Generic Mode Groups: <a href="{% url 'genericmodegroup-list' %}">{% url 'genericmodegroup-list' %}</a>
              </li>
              <li>
                Generic Modes: <a href="{% url 'genericmode-list' %}">{% url 'genericmode-list' %}</a>
              </li>
            </ul>
            {% endblock %}
          </div>
        </div>
      </div>
        <script src="{% static 'js/vendor/jquery-1.11.2.min.js' %}"></script>
        <script src="{% static 'js/vendor/bootstrap.min.js' %}"></script>
        <script src="{% static 'js/vendor/datatables.min.js' %}"></script>
        <script src="{% static 'js/main.js' %}"></script>
        {% block extra_javascript %}{% endblock %}
    </body>
</html>
